# [React] Fragment
JSX ํ์ผ ๊ท์น์ return ์ ํ๋์ ํ๊ทธ๋ก ๋ฌถ์ด์ผํ๋ค.
์ด๋ฐ ์ํฉ์ Fragment๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๊ฒ ๊ทธ๋ฃนํ๊ฐ ๊ฐ๋ฅํ๋ค.
์๋์ ๊ฐ์ด Table ์ปดํฌ๋ํธ์์ Columns๋ฅผ ๋ถ๋ ๋ค๊ณ ๊ฐ์ ํด๋ณด์
import { Component } from 'React'
import Columns from '../Components'
class Table extends Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
Columns ์ปดํฌ๋ํธ์์๋ <td> ~~ </td>
์ ๊ฐ์ element๋ฅผ ๋ฐํํด์ผ ์ ํจํ ํ
์ด๋ธ ์์ฑ์ด ๊ฐ๋ฅํ ๊ฒ์ด๋ค.
import { Component } from 'React'
class Columns extends Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
์ฌ๋ฌ td ํ๊ทธ๋ฅผ ์์ฑํ๊ธฐ ์ํด div ํ๊ทธ๋ก ๋ฌถ์๋ค. (JSX ํ์ผ ๊ท์น์ return ์ ํ๋์ ํ๊ทธ๋ก ๋ฌถ์ด์ผํ๋ค.)
์ด์ Table ์ปดํฌ๋ํธ์์ DOM ํธ๋ฆฌ๋ฅผ ๊ทธ๋ ธ์ ๋ ์ด๋ป๊ฒ ๊ฒฐ๊ณผ๊ฐ ๋์ค๋์ง ํ์ธํด๋ณด์
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
Columns ์ปดํฌ๋ํธ์์ div ํ๊ทธ๋ก ๋ฌถ์ด์ Table ์ปดํฌ๋ํธ๋ก ๋ณด๋๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ๋ฐ๋ผ์ JSXํ์ผ์ return๋ฌธ์ ๋ฌด์กฐ๊ฑด div ํ๊ทธ๋ก ๋ฌถ๋ ๊ฒ์ด ๋ฐ๋์งํ์ง ์์ ์ ์๋ค.
์ด๋ ์ฌ์ฉํ ์ ์๋ ๋ฌธ๋ฒ์ด ๋ฐ๋ก Fragment
๋ค.
import { Component } from 'React'
class Columns extends Component {
render() {
return (
<Fragment>
<td>Hello</td>
<td>World</td>
</Fragment>
);
}
}
div ํ๊ทธ ๋์ ์ Fragment๋ก ๊ฐ์ธ์ฃผ๋ฉด ๋ฌธ์ ๊ฐ ํด๊ฒฐ๋๋ค. Fragment๋ DOMํธ๋ฆฌ์ ์ถ๊ฐ๋์ง ์๊ธฐ ๋๋ฌธ์ ์ ์์ ์ผ๋ก Table์ ์์ฑํ ์ ์๋ค.
Frament๋ก ๋ช ์ํ์ง ์๊ณ , ๋น ํ๊ทธ๋ก๋ ๊ฐ๋ฅํ๋ค.
import { Component } from 'React'
class Columns extends Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
์ด ๋ฐ์๋ ๋ถ๋ชจ, ์์๊ณผ์ ๊ด๊ณ์์ flex, grid๋ก ์ฐ๊ฒฐ๋ element๊ฐ ์๋ ๊ฒฝ์ฐ์๋ div๋ก ์ฐ๊ฒฐ ์ ๋ ์ด์์์ ์ ์งํ๋๋ฐ ์ด๋ ค์์ ๊ฒช์ ์๋ ์๋ค.
๋ฐ๋ผ์ ์์ ๊ฐ์ ๊ฐ๋ฐ์ด ํ์ํ ๋๋ Fragment๋ฅผ ์ ์ ํ ์ํฉ์ ์ฌ์ฉํ๋ฉด ๋๋ค.
# [์ฐธ๊ณ ์ฌํญ]
โ - Nuxt.js - React Hook โ